<template>
  <div class="EnvironmentBox">
    <div class="titleBox">
      <h3 class="title01">环境概览</h3>
    </div>
    <div class="DataDisplay">
      <div class="DeviceId">
        <div class="CustomTabs">
          <!-- {{ isTimerActive }} -->
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            class="DeviceTab"
            @tab-click="handleTabClick"
          >
            <div v-if="!editableTabsData.length">暂无数据</div>

            <TabsName
              v-if="editableTabsData.length"
              :isTimerActive="isTimerActive"
              v-for="tab in editableTabsData"
              :key="tab.name"
              :tab="tab"
            />
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TabsName from "./TabsName.vue";
import { ref, onMounted, onUnmounted, provide } from "vue";
import { getEnv } from "@/api/Environment/index.js";

const editableTabsValue = ref("1");
const editableTabsData = ref([]);

const isTimerActive = ref(true); // 全局定时器状态

onMounted(async () => {
  const res = await getEnv();
  if (res.code == 200) {
    console.log(res.data);
    // 遍历所有数据项并创建 tabs
    res.data.forEach((item, index) => {
      // 只在 nowPlantName 存在时创建 tab
      if (item.nowPlantName) {
        // 创建 tab 名称
        const tabTitle = item.nowPlantName;
        // 创建 tab 的唯一标识符
        const tabName = String(index + 1);
        // 添加 tab 到 editableTabsData 数组
        editableTabsData.value.push({
          title: tabTitle,
          name: tabName,
          content: `植物名称: ${tabTitle}`, // 使用 nowPlantName 作为内容
        });
      }
      console.log(editableTabsData.value);
    });
  }
});

// onMounted(async () => {
//   const res = await getEnv();
//   if (res.code == 200) {
//     console.log(res.data);
//     // 遍历所有数据项并创建 tabs
//     res.data.forEach((item, index) => {
//       // 创建 tab 名称，优先使用 nowPlantName，否则使用 plantname
//       const tabTitle = item.nowPlantName || item.plantname;
//       // 创建 tab 的唯一标识符
//       const tabName = String(index + 1);
//       // 添加 tab 到 editableTabsData 数组
//       editableTabsData.value.push({
//         title: tabTitle,
//         name: tabName,
//         content: `植物名称: ${item.dname || '未知植物'}`,
//       });
//       console.log(editableTabsData.value);
//     });
//   }
// });

// onMounted(async () => {
//   // 假数据数组
//   const fakeData = [
//     { nowPlantName: '胡萝卜', dname: '胡萝卜' },
//     { nowPlantName: '清盛锦', dname: '清盛锦' },
//     // { nowPlantName: '草玉露', dname: '草玉露' },
//     // { nowPlantName: '蒲公英', dname: '蒲公英' },
//     // { nowPlantName: '莲花', dname: '莲花' },
//     // { plantname: '露娜莲', dname: '露娜莲' },
//   ];

//   // 模拟异步操作
//   setTimeout(() => {
//     // 遍历所有数据项并创建 tabs
//     fakeData.forEach((item, index) => {
//       // 创建 tab 名称，优先使用 nowPlantName，否则使用 plantname
//       const tabTitle = item.nowPlantName || item.plantname;
//       // 创建 tab 的唯一标识符
//       const tabName = String(index + 1);
//       // 添加 tab 到 editableTabsData 数组
//       editableTabsData.value.push({
//         title: tabTitle,
//         name: tabName,
//         content: `植物名称: ${item.dname || '未知植物'}`,
//       });
//       console.log(editableTabsData.value);
//     });
//   }, 1000); // 延迟1秒模拟异步请求
// });

const handleTabClick = (tab) => {
  if (tab.props.name == "1") {
    isTimerActive.value = true; // 停止定时器
  } else {
    isTimerActive.value = false; // 启动定时器
  }
};
</script>

<style lang="scss" scoped>
.EnvironmentBox {
  width: 100%;
  height: 100%;

  .title01 {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    border-left: 5px solid #409eff;
    padding-left: 10px;
    margin-bottom: 10px;
  }

  .DataDisplay {
    display: flex;
    flex-direction: column;
    // background-color: #000;

    .DeviceId {
      // width: 100vw;
      height: 50px;

      // background-color: #000;
      .DeviceTab > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
      }
    }
  }
}
</style>
